<template>
	<div class="comment_examine table-theme">
		<head-title title="审核--评论审核"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="examine_status" @roleType="stateType"></tabs-view>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="conmentList">
				<el-table-column label="序号" align="center" prop="comment_id"></el-table-column>
				<el-table-column label="商品编号" align="center" prop="goods_sn"></el-table-column>
				<el-table-column label="商品图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image_thumb"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="类型" align="center" prop="type_name"></el-table-column>
				<el-table-column label="商品名称" align="center" prop="goods_name"></el-table-column>
				<el-table-column label="昵称" align="center" prop="user_name"></el-table-column>
				<el-table-column label="头像" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.headimgurl"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="评论内容" align="center" prop="text"></el-table-column>
				<el-table-column label="拒绝原因" align="center" prop="refuse_reason"></el-table-column>
				<el-table-column label="审核状态" align="center" prop="examine_status_name"></el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="operate(0, scope.row.comment_id)">详情</el-button>
						<el-button v-if="scope.row.examine_status == 0" type="primary" size="mini" @click="operate(1, scope.row.comment_id)">审核</el-button>
						<el-button v-if="scope.row.examine_status == 0" type="danger" size="mini" @click="operate(2, scope.row.comment_id)">拒绝</el-button>
						<el-button type="danger" size="mini" @click="operate(3, scope.row.comment_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<!-- 拒绝原因弹框 -->
		<el-dialog title="拒绝原因" :visible.sync="remarksDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="remarksForm" :rules="remarksFormRules" ref="remarksForm" label-width="120px">
				<el-form-item label="拒绝原因:" prop="refuse_reason">
					<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="remarksForm.refuse_reason"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="remarksDialog = false">取 消</el-button>
				<el-button type="primary" @click="confirmClick('remarksForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import TabsView from '@/components/TabsView'
	export default {
		components: {
			ImgPopover,
			TabsView
		},
		data() {
			return {
				remarksDialog: false,
				remarksForm: {
					refuse_reason: ''
				},
				remarksFormRules: {
					refuse_reason: [{
						required: true,
						message: '请输入内容'
					}]
				},
				selectContent: '',
				classSelect:0,
				storeInfo: '', // 展示店铺信息
				storeInfoDialog: false, // 详情弹框
				conmentList: [], // 店铺列表
				total: 0,
				totalData: 0,
				examine_status: 0,
				page: 0,
				classifyList: ['全部', '待审核','审核通过','拒绝'],
				searchOption:[{
					value:0,
					label:'商品编号'
				}]
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10
				};
				if (this.examine_status != 0) {
					// data.examine_status 0 待审核 1 审核通过 2 拒绝
					data.examine_status = this.examine_status - 1;
				}
				if (this.selectContent != '') {
					data.goods_sn = this.selectContent;
				}

				this.$http(this.$ApiList.CommentList, data).then(res => {
					this.conmentList = [];
					if (res.datas.length != 0) {
						this.conmentList = res.datas.data;
						this.total = res.datas.count;
					}
				});
			},
			stateType(type) {
				this.examine_status = type;
				this.init();
			},
			operate(type, comment_id) {
				let data = {
					comment_id: comment_id
				};
				//type 0详情 1审核 2拒绝 3删除
				switch (type) {
					case 0:
						this.$router.push({
							path: '/add_goods_comment',
							query: {
								type: 0,
								id: comment_id
							}
						});
						break;
					case 1:
						this.$http(this.$ApiList.CommentSuccess, data).then(res => {
							if (res.code == 200) {
								this.$layer.msg('操作成功');
								this.page = 1;
								this.init()
							}
						});
						break;
					case 2:
						this.remarksDialog = true;
						this.remarksForm.comment_id = comment_id;
						break;
					case 3:
						this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							})
							.then(() => {
								this.$http(this.$ApiList.CommentDelete, data).then(res => {
									if (res.code == 200) {
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
										this.page = 1;
										this.init()
									}
								});
							})
							.catch(() => {});
						break;
				}
			},
			//提交
			confirmClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.$http(this.$ApiList.CommentRefuse, this.remarksForm).then(res => {
							if (res.code == 200) {
								this.$layer.msg('操作成功');
								this.remarksDialog = false
								this.init()
							}
						});
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			// 搜素
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.selectContent = '';
				this.examine_status = 0;
				this.init();
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	
</style>
